<template>
  <div>
    <el-page-header @back="goBack" style="margin-bottom: 30px;"></el-page-header>
    <div>
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="房间类型" disabled prop="id">
          <el-input v-model="form.id" key="id"></el-input>
        </el-form-item>
        <el-form-item label="房间类型名" prop="name">
          <el-input v-model="form.name" key="name"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" key="price"></el-input>
        </el-form-item>
        <el-form-item label="总量" prop="total">
          <el-input v-model="form.total" key="total"></el-input>
        </el-form-item>
        <el-form-item label="剩余" prop="num">
          <el-input v-model="form.number" key="num"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <div class="show-img" v-if="form.img">
            <span class="el-icon-delete-solid" @click="form.img=''"></span>
            <img :src="`${$server.SERVER_BASEPATH}${form.img}`" width="100px" height="100px" />
          </div>
          <el-upload
            v-else
            :action="`${$server.SERVER_BASEPATH}/admin/upload/img`"
            name="myfile"
            :show-file-list="false"
            :on-success="uploadOk"
            :on-error="uploadError"
            :before-upload="beforeUpload"
          >
            <div class="el-icon-plus"></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item>
          <template>
            <el-button type="text" @click="open" class="yes">更改</el-button>
          </template>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: "",
        name: "",
        price: "",
        total: "",
        num: "",
        img: "",
        description: "",
      },
    };
  },

  created() {
    this.form = JSON.parse(this.$route.query.row);
    console.log(this.form);
  },
  methods: {
    // getData(){
    //    this.form = this.$route.params.row;
    // },
    onSubmit() {
      console.log("submit!");
    },
    goBack() {
      this.$router.back();
    },
    uploadOk(res) {
      //上传成功的回调
      this.form.img = res.file;
    },
    uploadError(err) {
      //上传失败的回调
      console.error(err);
    },
    beforeUpload(file) {
      //上传前的回调
      const isJPG = file.type === ("image/jpeg" || "image/png");
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    open() {
      this.$confirm("确定修改房间吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(222);
          let from = {};
          this.$http({
            url: "RoomType/update",
            method: "get",
            params: this.form,
          })
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
              }
              if (res.data.code == 400) {
                this.$message({
                  type: "success",
                  message: "修改失败!",
                });
              }
            })
            .catch(() => {
              // console.log("请求失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
  },
};
</script>

<style scoped>
.el-icon-plus {
  cursor: pointer;
  border: 1px dashed #999;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #999;
  border-radius: 6px;
}
.show-img {
  border: 1px dashed #999;
  width: 100px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.show-img img {
  width: 100%;
  height: 100%;
}
.yes {
  margin-right: 20px;
  width: 100px;
  height: 30px;
  background-color: rgb(240, 249, 235);
  font-size: 12px;
  color: #67c23a;
  text-align: center;
  padding: 0;
}
</style>